<!-- eslint-disable vue/require-valid-default-prop -->
<script setup>
import * as dayjs from 'dayjs'
const props = defineProps({
  list: { type: Object, default: {} }
})
console.log(props.list)
</script>
<template>
  <div class="v-consult-module">
    <van-image round width="2.5em" height="2.5em" :src="list.doctorIcon" />
    <div class="v-consult-right">
      <p class="v-consult-right-top">
        <span class="v-consult-right-name">{{ list.doctorName }}</span>
        <span class="v-consult-right-date">{{
          dayjs(list.createTime).format('YYYY.MM.DD')
        }}</span>
      </p>
      <div class="v-consult-right-bottom">
        <span class="v-consult-right-content van-ellipsis v-consult-btn-active"
          >根据您的状况，我建议采根据您的状况，我建议采</span
        >
        <span class="v-consult-right-btn" v-if="list.type === 1">营养方案</span>
        <span class="v-consult-right-btn" v-else>推荐营养师</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.v-consult-module {
  padding: 20px 15px 15px;
  display: flex;
  position: relative;
  .v-consult-right {
    width: 295px;
    margin-left: 10px;
    .v-consult-right-top {
      display: flex;
      justify-content: space-between;
      .v-consult-right-name {
        font-size: 15px;
        color: #212532;
      }
      .v-consult-right-date {
        font-size: 12px;
        color: #848484;
      }
    }
    .v-consult-right-bottom {
      display: flex;
      padding-top: 7px;
      justify-content: space-between;
      .v-consult-right-content {
        font-size: 15px;
        color: #212532;
      }
      .v-consult-right-btn {
        padding: 8px 10px;
        background: #e9f6ff;
        border-radius: 18px;
        font-size: 14px;
        color: #357efe;
        text-align: center;
      }
    }
    .v-consult-btn-active {
      width: 176px;
    }
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 66px;
    height: 1px;
    background: #eaeaea;
    transform: scaleY(0.5);
  }
}
</style>
